<template>
  <div class="container">
    <van-nav-bar title="返工返修-报废录入" fixed class="titleStyle" left-arrow @click-left="onClickLeft" />
    <van-row class="publicBox">
      <van-row type="flex" justify="space-between">
        <van-col>
          <van-button type="info" style="width:100px;margin-right:10px;" size="small" @click="addLine">新增</van-button>
          <van-button type="danger" style="width:100px" size="small" @click="deleteItem">删除</van-button>
        </van-col>
        <van-button type="primary" style="width:100px" size="small" @click="submit">保存</van-button>
      </van-row>
      <van-row class="content">
        <div v-for="(item,index) in itemList" :key="index" class="itemList">
          <div class="choose">
            <van-checkbox v-model="item.checked" shape="square" />
          </div>
          <div class="items">
            <van-field :value="++index" label="序号" />
            <van-field v-model="item.num" class="mustInput" label="报废数量" type="digit" />
            <van-field name="checkboxGroup" label="缺陷项">
              <template #input>
                <van-checkbox-group v-model="item.defectsIdList">
                  <van-checkbox v-for="itx in defectsList" :key="itx.defectId" :name="itx.defectId" shape="square">{{ itx.defectName }}</van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
        </div>
      </van-row>
    </van-row>
  </div>
</template>
<script>
export default {
  props: {
    defectiveModel: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      itemList: [{}],
      defectsList: []
    }
  },
  mounted () {
    this.getDefectsList()
  },
  methods: {
    /**
     * @description:查询缺陷项列表
     * @return {*}
     */
    async getDefectsList () {
      const res = await this.$axios.get('/dobo-product/pro/patrol/check/defectsList')
      if (res?.data.code === 200) {
        this.defectsList = res.data.data
      }
    },
    onClickLeft () {
      this.$emit('update:badModel', false)
    },
    submit () {
      if (this.itemList.length) {
        // defectsIdList num determine
        const flag = this.itemList.some(item => item.checked && (!item.defectsIdList || item.defectsIdList.length < 1 || (!item.num || item.num < 1)))
        if (flag) {
          this.$dialog.alert({
            title: '提示',
            message: '存在缺陷项或废品数量为空！'
          })
        } else {
          const arr = this.itemList.filter(item => item.checked)
          arr.forEach((item, index) => {
            const defectsList = this.defectsList.filter(el => item.defectsIdList.includes(el.defectId))
            item.defectsList = defectsList
          })
          this.$emit('getEntry', arr)
          this.onClickLeft()
        }
      } else {
        this.onClickLeft()
      }
    },
    addLine () {
      this.itemList.push({})
    },
    deleteItem () {
      this.itemList = this.itemList.filter(item => !item.checked)
    }
  }
}
</script>
<style lang='scss' scoped>
.content {
  margin-top: 10px;
  .itemList {
    height: 100%;
    background: #f1f1f1;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    .choose {
      position: absolute;
      top: 50%;
      left: 10px;
      translate: 0% -50%;
      background: #fff;
    }
    .items {
      width: calc(100% - 40px);
      margin-left: 30px;
      display: inline-block;
      .van-checkbox {
        margin-bottom: 5px;
      }
    }
  }
}
</style>
